<template>
  <u-modal :show="showModal" @cancel="onClose" @confirm="onConfirm" title="选择机台" :showCancelButton="true">
    <view class="width-100-percentage">
      <view class="flex-between-center margin-bottom-20">
        <u-search
            placeholder="设备编号或名称"
            v-model="searchParams.name"
            size="large"
            @search="onSearchBtn"
            @clear="onSearchBtn('')"
            @custom="onSearchBtn"
        ></u-search>
      </view>
      <view class="flex-between-center margin-bottom-20">
        <u-tag :text="`总数: ${tableData.length}`" plain></u-tag>
        <u-tag :text="`已选: ${checkedArr.length}`" plain></u-tag>
      </view>
      <view class="check-machine-container" :style="{height: `${windowHeight - 300}px`}">
        <u-loading-icon :show="showLoading"></u-loading-icon>
        <checkbox-group @change="onCheckChange">
          <view style="display: flex;flex-wrap: wrap;">
            <label
                v-for="(item, index) in tableData"
                :key="item.id"
                class="check-machine-item"
            >
              <checkbox :value="item.id" :checked="item.checked" :disabled="item.disabled" />
              <text>{{ item.code }}</text>
            </label>
          </view>
        </checkbox-group>
      </view>
    </view>
  </u-modal>
</template>
<script>
  import {machineList} from "../../../../api";
  import {tipBar} from "../../../../utils/jk-utils";

  export default {
    props: {
      show: {
        type: Boolean,
        default: false
      },
      windowHeight: {
        type: [Number, String],
        default: 0
      },
      hasList: {
        type: Array,
        default() {
          return [];
        }
      }
    },
    data() {
      return {
        showLoading: false,
        searchParams: {
          name: ''
        },
        showModal: false,
        tableData: [],
        checkedArr: []
      };
    },
    methods: {
      onSearchBtn(e) {
        this.$set(this.searchParams, 'name', e);
        this.getMachineListRequest();
      },
      onCheckChange(e) {
        this.checkedArr = e.detail.value;
      },
      onClose() {
        this.$emit('close', false);
      },
      onConfirm() {
        let arr = [];
        this.checkedArr.forEach(x => {
          this.tableData.forEach(k => {
            if (Number(x) === Number(k.id)) {
              arr.push(k);
            }
          })
        })
        if (arr && arr.length) {
          this.$emit('confirm', arr);
          this.checkedArr = [];
        } else {
          tipBar('none');
        }
      },
      getMachineListRequest() {
        this.showLoading = true;
        this.tableData = [];
        return machineList(this.searchParams).then(res => {
          this.showLoading = false;
          if (res.data.status === 200) {
            this.tableData = res.data.res.map((x) => {
              x.checked = false;
              x.checked = false;
              this.hasList.forEach(k => {
                if (k.machineId === x.id) {
                  x.disabled = true;
                }
              });
              return x;
            });
          }
        })
      }
    },
    watch: {
      show(newVal) {
        this.showModal = newVal;
        if (newVal) {
          this.checkedArr = [];
          this.getMachineListRequest();
        }
      }
    }
  }
</script>
<style scoped lang="scss">
  .check-machine-item {
    width: calc(100% / 3);
    box-sizing: border-box;
    margin: 4rpx 0;
  }
  .check-machine-container {
    overflow: auto;
  }
</style>
